<!DOCTYPE html>
<html lang="en" layout:decorator="layout/main" xmlns:layout="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,initial-scale=1"/>

    <link rel="stylesheet" th:href="@{/thirdParty/datatables/dataTables.bootstrap.css}" />
    <link rel="stylesheet" th:href="@{/thirdParty/iCheck/all.css}" />

    <title>商家管理</title>
</head>
<body>
<section class="content" layout:fragment="content">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">商家管理</h3>
            </div>
            <div class="col-xs-12">
                <button type="button" onclick="toAdd();" class="btn bg-purple margin pull-right"
                        data-toggle="modal" data-target="#myModal"><i class="fa fa-credit-card"></i> 添加店铺
                </button>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive">
                <table id="datasOnTable" class="table table-bordered table-hover table-responsive">
                    <thead>
                    <tr>
                        <th><nobr>店铺编号</nobr></th>
                        <th><nobr>店铺名称</nobr></th>
                        <th><nobr>仓库编号</nobr></th>
                        <th><nobr>店铺销量</nobr></th>
                        <th><nobr>logo</nobr></th>
                        <th><nobr>店铺地址</nobr></th>
                        <th><nobr>是否认证</nobr></th>
                        <th><nobr>粉丝数量</nobr></th>
                        <th><nobr>操作</nobr></th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>

    <!--dialog-->
    <div class="modal inmodal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <form role="form" class="form-horizontal" id="updateFrom" th:action="@{/admin/merchant/createShop}" method="post">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <i class="fa fa-laptop modal-icon"></i>
                        <h4 id="AAA" class="modal-title">编辑</h4>
                    </div>
                    <div class="modal-body col-xs-12">

                        <div class="zTreeDemoBackground right col-xs-6">
                            <input type="hidden" name="roleId" id="roleId"/>
                            <input type="hidden" name="menuIds" id="menuIds"/>
                            <div class="form-group">
                                <label>商家名称</label>
                                <input type="text" class="form-control" id="merchantName" name="merchantName" placeholder="输入商家名称" />
                            </div>
                            <div class="form-group">
                                <label>店铺名称</label>
                                <input type="text" class="form-control" id="shopName" name="shopName" placeholder="输入店铺名称" />
                            </div>
                            <div class="form-group">
                                <label>经度</label>
                                <input type="text" class="form-control" id="longitude" name="longitude" placeholder="经度" />
                            </div>
                            <div class="form-group">
                                <label>纬度</label>
                                <input type="text" class="form-control" id="latitude" name="latitude" placeholder="纬度" />
                            </div>
                            <div class="form-group">
                                <label>店铺地址</label>
                                <input type="text" class="form-control" id="mappingAddress" name="mappingAddress" placeholder="店铺地图对应地址" />
                            </div>
                            <div class="form-group">
                                <label>补充地址</label>
                                <input type="text" class="form-control" id="appendAddress" name="appendAddress" placeholder="补充地址" />
                            </div>
                            <div class="form-group">
                                <label>配送范围（公里）</label>
                                <input type="text" class="form-control" id="distanceScope" name="distanceScope" placeholder="配送地址" />
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                        <button type="button" id="saveBtn" class="btn btn-primary">保存修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</section>

<div layout:fragment="script">
    <script th:src="@{/thirdParty/datatables/jquery.dataTables.min.js}"></script>
    <script th:src="@{/thirdParty/datatables/dataTables.bootstrap.min.js}"></script>
    <script th:src="@{/thirdParty/iCheck/icheck.min.js}" />
    <script th:src="@{/thirdParty/jquery.form.js}" />
    <script>
        $(function () {
            //Flat red color scheme for iCheck
            $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
                checkboxClass: 'icheckbox_flat-green',
                radioClass: 'iradio_flat-green'
            });

            $("#datasOnTable").dataTable(
                {
                    "filter" : false,//去掉搜索框
                    "ordering" : false,
                    "lengthChange": false,
                    "paginationType" : "full_numbers",
                    "destroy" : true,
                    "processing" : true,
                    "serverSide" : true,
                    "ajax" : {
                        "type":"post",
                        "url" :  ctx+"admin/merchant/shopList",
                        "dataSrc": "content",
                        "dataFilter": function(data){
                            var json = jQuery.parseJSON( data );
                            json.recordsTotal = json.totalElements;
                            json.recordsFiltered = json.totalElements;
                            return JSON.stringify( json ); // return JSON string
                        },
                        "data": function (d) {
                        },
                        "error" : function(){
                            alert("请求数据出错");
                        }
                    },
                    "columns" : [
                        {"data" : "shopId"},
                        {"data" : "name"},
                        {"data" : "storeId"},
                        {"data" : "saleMount"},
//                        {"data" : "imageUrl"},
                        {
                            "data" : null,
                            "render":function(data,type,row){
                                var str = '<img style="height: 60px;width: 60px;" src="'+row['imageUrl']+'"> </img>';
                                console.log(str);
                                return str;
                            }
                        },
//                                {"data" : "onePrice"},
                        {"data" : "address"},
//                        {"data" : "certification"},
                        {
                            "data" : null,
                            "render":function(data,type,row){
                                var status = row['certification'];
                                var str = '<span class="label label-success">是</span>';
                                if (!status) {
                                    str = '<span class="label label-danger">否</span>';
                                }
                                return str;
                            }
                        },
                        {"data" : "fansCount"},
                        {
                            "data" : null,
                            "render":function(data,type,row){
                                var str = '<button onclick="productListPage('+row['shopId']+')" type="button" class="btn btn-success" ><i class="fa fa-pencil"></i> 商品管理 </button>';
                                var str2 = '<button onclick="storeProductListPage('+row['shopId']+')" type="button" class="btn btn-info" ><i class="fa fa-pencil"></i> 库存商品 </button>';

                                return str+"<br/>" +str2;
                            }
                        }
                    ],
                    "language" : {
                        "url" : ctx+'thirdParty/datatables/dataTables.CN.txt'
                    }
                });
        });

        function toAdd(){
            console.log("123");
            changeDialog(0);
        }

        //编辑确认按钮
        $("#saveBtn").bind("click",function() {
            $("#updateFrom").ajaxSubmit({
                success:function(){
                    alert("成功");
                    $('#myModal').modal('hide');
                },
                error: function (xhr, status, error) {
                    var result = jQuery.parseJSON(xhr.responseText);
                    alert(result.message);
                }
            });

        });

        function changeDialog(id){
            console.log(id);
            if(id!=0) {
                $("#userId").val(id);
            }
            var zTreeObj;
            $.ajax({type:"get",
                url:ctx+"admin/user/detail/"+id,
                data:{},
                dataType:"json",
                error: function(){
                    alert("系统忙，请稍后再试！");
                },
                success:function(json){
                    console.log(json.cnName);
                    $("#cnName").val(json.cnName);
                    $("#radio"+json.roleId).iCheck('check');
                }
            });
        }

        function productListPage(id) {
            if (id===null) {
                id = 0;
            }
            window.location.href = ctx + "admin/merchant/productListPage?shopId="+id;
        }

        function storeProductListPage(id) {
            if (id===null) {
                id = 0;
            }
            window.location.href = ctx + "admin/merchant/storeProductListPage?shopId="+id;
        }
    </script>
</div>


</body>
</html>